<template>
	<div class="app-container">
		<div class="header">
			<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />添加产品
		</div>
		<el-form ref="baseform" :model="form" label-position="right" :rules="rules" label-width="120px">
			<el-form-item prop="productName" label="产品名称">
				<el-input v-model="form.productName" style="width: 50%" placeholder="请输入产品名称" />
			</el-form-item>
			<el-form-item prop="productCode" label="产品编号">
				<el-input v-model="form.productCode" style="width: 50%" placeholder="请输入产品编号" />
			</el-form-item>
			<el-form-item prop="productBrand" label="产品品牌">
				<el-input v-model="form.productBrand" style="width: 50%" placeholder="请输入产品品牌" />
			</el-form-item>
			<el-form-item prop="productSpecs" label="产品规格">
				<el-input v-model="form.productSpecs" style="width: 50%" placeholder="请输入产品规格" />
			</el-form-item>
			<el-form-item prop="productNum" label="产品数量">
				<el-input-number
					:controls="false"
					:precision="0"
					:step="1"
					:min="0"
					v-model="form.productNum"
					style="width: 50%"
					placeholder="请输入产品数量"
				/>
			</el-form-item>
			<el-form-item prop="typeId" label="产品类型">
				<el-select
					v-model="form.typeId"
					style="width: 50%; margin-right: 10px"
					filterable
					remote
					reserve-keyword
					remote-show-suffix
					placeholder="请选择产品类型"
					:remote-method="remoteMethod"
					:loading="loading"
				>
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item prop="isRecommend" label="推荐">
				<el-checkbox style="position: relative; top: -3px" true-label="1" false-label="2" v-model="form.isRecommend" label="" size="large" />
			</el-form-item>
			<el-form-item label="文件上传">
				<el-upload
					v-model:file-list="filelist"
					:action="fileUrl"
					ref="upload"
					multiple
					accept=".xlsx,xls"
					:headers="token"
					name="files"
					:on-success="handleSuccess"
					:on-remove="handleRemove"
					style="width: 340px"
				>
					<el-button type="primary">上传</el-button>
				</el-upload>
			</el-form-item>
			<el-form-item label="图片上传">
				<el-upload
					class="avatar-uploader"
					:action="imgUrl"
					ref="upload"
					multiple
					accept=".jpg,.jpeg,.png"
					list-type="picture-card"
					v-model:file-list="imglist"
					:headers="token"
					name="files"
					:on-success="handleSuccessImg"
					:on-remove="handleRemoveImg"
					:on-preview="handlePictureCardPreview"
				>
					<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
				</el-upload>
			</el-form-item>
			<el-form-item prop="productNote" label="备注信息">
				<el-input :rows="5" type="textarea" v-model="form.productNote" placeholder="请输入备注信息" />
			</el-form-item>
		</el-form>
		<div style="line-height: 80px; height: 80px; padding-left: 100px">
			<el-button type="primary" @click="submit">提交</el-button>
			<el-button @click="reback">返回</el-button>
		</div>
		<el-dialog v-model="dialogVisible">
			<img v-full :src="dialogImageUrl" alt="Preview Image" />
		</el-dialog>
	</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
const { proxy } = getCurrentInstance()
import { getConfigKey } from '@/api/system/config'
import { addProduct, listTwoNoPage } from '@/api/product/product'
import { getToken } from '@/utils/auth'
import useTagsViewStore from '@/store/modules/tagsView'
const tagsView = useTagsViewStore()
const fileUrl = ref('')
const imgUrl = ref('')
const pre = ref('')
getConfigKey('file_upload').then((response) => {
	fileUrl.value = response.msg
})
getConfigKey('img_upload').then((response) => {
	imgUrl.value = response.msg
})
getConfigKey('sys.upload').then((response) => {
	pre.value = response.msg
})

const token = { Authorization: 'Bearer ' + getToken() }
const router = useRouter()
const baseform = ref()

const form = reactive({
	productName: '',
	productBrand: '',
	isRecommend: '2',
	filePaths: [],
	imgPaths: [],
	productSpecs: '',
	productNum: 0,
	productNote: '',
	productCode: '',
	typeId: undefined
})
const rules = {
	productName: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
	productBrand: [{ required: true, message: '品牌名称不能为空', trigger: 'blur' }],
	typeId: [{ required: true, message: '产品类型不能为空', trigger: 'blur' }],
	productSpecs: [{ required: true, message: '产品规格不能为空', trigger: 'blur' }],
	productCode: [{ required: true, message: '产品编号不能为空', trigger: 'blur' }],
	productNum: [{ required: true, message: '产品数量不能为空', trigger: 'blur' }]
}
const options = ref([])
const productOption = ref([])
listTwoNoPage().then((res) => {
	productOption.value = res.data.map((e) => {
		return {
			label: e.typeName,
			value: e.typeId + ''
		}
	})
	options.value = productOption.value
})
const loading = ref(false)
const remoteMethod = (query) => {
	if (query) {
		loading.value = true
		setTimeout(() => {
			loading.value = false
			options.value = productOption.value.filter((item) => {
				return item.label.toLowerCase().includes(query.toLowerCase())
			})
		}, 200)
	} else {
		options.value = productOption.value
	}
}

const imglist = ref([])
const filelist = ref([])

const handleSuccessImg = () => {
	form.imgPaths = imglist.value.map((e) => {
		if (e) {
			return e.response ? e.response.data[0] : e.url.replace(pre.value, '')
		}
	})
}
const handleRemoveImg = () => {
	form.imgPaths = imglist.value.map((e) => {
		if (e) {
			return e.response ? e.response.data[0] : e.url.replace(pre.value, '')
		}
	})
}
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handleSuccess = () => {
	form.filePaths = filelist.value.map((e) => {
		if (e) {
			return e.response ? e.response.data[0] : e.url
		}
	})
}
const handleRemove = () => {
	form.filePaths = filelist.value.map((e) => {
		if (e) {
			return e.response ? e.response.data[0] : e.url
		}
	})
}
const handlePictureCardPreview = (uploadFile) => {
	dialogImageUrl.value = uploadFile.url
	dialogVisible.value = true
}
const submit = () => {
	baseform.value.validate((valid, e) => {
		if (valid) {
			addProduct(form).then((res) => {
				proxy.$modal.msgSuccess('新增成功！')
				tagsView.delView(router.currentRoute.value)
				router.go(-1)
			})
		}
	})
}

const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
</script>
<style lang="scss" scoped>
.header {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	margin-bottom: 5px;
}
</style>
